<!DOCTYPE html>
<html>
  <head>
    <title>【每日一练】11—复选框效果的实现</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #cfd1e1;
        overflow: hidden;
      }
      label {
        position: relative;
        width: 120px;
        height: 60px;
        transition: 0.5s;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      label::before {
        content: "";
        position: absolute;
        width: 60%;
        height: 4px;
        background: #444;
        border-radius: 4px;
      }
      label input {
        position: absolute;
        appearance: none;
      }
      .icon {
        position: absolute;
        left: 0;
        width: 60px;
        height: 100%;
        transition: 0.5s;
      }
      label input:checked ~ .icon {
        left: 60px;
      }
      .icon::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 100%;
        background: linear-gradient(#fff, #fff, #e3e3e3);
        z-index: 1;
        filter: blur(1px);
      }
      .icon::after {
        content: "";
        position: absolute;
        top: 0;
        right: -1px;
        width: 10px;
        height: 100%;
        background: #9d9d9d;
        z-index: 1;
        filter: blur(1px);
      }
      .shadow {
        position: absolute;
        top: 30px;
        left: -12px;
        width: 84.85px;
        height: 300px;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.1),
          transparent,
          transparent
        );
        transform-origin: top;
        transform: rotate(315deg);
        pointer-events: none;
      }
      .iconBox {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(#dbdae1, #a3aaba);
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1),
          15px 15px 15px rgba(0, 0, 0, 0.1), 20px 20px 15px rgba(0, 0, 0, 0.1),
          30px 30px 15px rgba(0, 0, 0, 0.1), inset 1px 1px 2px #fff;
      }
      ion-icon {
        position: absolute;
        color: #555;
        font-size: 1.5em;
        --ionicon-stroke-width: 50px;
        transition: 0.5s;
      }
      label input:checked ~ .icon ion-icon {
        color: #00ffe2;
        filter: drop-shadow(0 0 5px #00ffe2) drop-shadow(0 0 15px #00ffe2);
      }
    </style>
  </head>
  <body>
    <label>
      <input type="checkbox" />
      <div class="icon">
        <div class="shadow"></div>
        <div class="iconBox">
          <ion-icon name="power-outline"></ion-icon>
        </div>
      </div>
    </label>
    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>
